<template>
	<sc-dialog v-model="visible" :title="titleMap[mode]" show-fullscreen destroy-on-close width="450px" @close="close">
		<el-form ref="formRef" label-width="140px" :model="formData" :rules="rules">
			<el-form-item label="所属产线" prop="lineId">
				<el-select v-model="formData.lineId" :disabled="mode == 'edit'" placeholder="请选择产线">
					<el-option v-for="item in lineOptions" :key="item.id" :label="item.lineCode" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="班次" prop="shiftId">
				<el-select v-model="formData.shiftId" :disabled="mode == 'edit'" placeholder="请选择班次">
					<el-option v-for="item in shiftOptions" :key="item.id" :label="item.shiftName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="区域" prop="area">
				<el-select v-model="formData.area" :disabled="mode == 'edit'" placeholder="请选择区域">
					<el-option v-for="item in areaOptions" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-form-item>
			<el-form-item label="区域下件工序" prop="tailProcCode">
				<el-input v-model.trim="formData.tailProcCode" />
			</el-form-item>
			<el-form-item label="任务数量" prop="qty">
				<el-input-number v-model="formData.qty" :min="0" :max="99999" :step="10" />
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">确 定</el-button>
		</template>
	</sc-dialog>
</template>

<script>
export default {
    emits: ['complete'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			isSaveing: false,
			visible: false,
			lineOptions:[],
			processOptions: [],
			shiftOptions:[],
			areaOptions:[ {
				code: "01",
				name: "区域一",
			},{
				code: "02",
				name: "区域二",
			},{
				code: "03",
				name: "区域三",
			}],
			formData: {
				id: 0,
				lineId: undefined,
				shiftId: undefined,
				area: undefined,
				tailProcCode: undefined,
				qty: 0,
			},
			rules: {
				lineId: [{required: true, message: "请选择产线", trigger: "blur"}],
				shiftId: [{required: true, message: "请选择班次", trigger: "blur"}],
				area: [{required: true, message: "请选择区域", trigger: "blur"}],
				tailProcCode: [{required: true, message: "请输入区域下件工序", trigger: "blur"}],
				qty: [{required: true, message: "请输入计划数量", trigger: "blur"}],
			},
		};
	},
	methods: {
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				let resp = await this.$API.prod_task.model.get(row.id);
				this.formData = resp.data;
			}
			const resp = await this.$API.mdline.list.get();
			this.lineOptions = resp.data;

			const resp2 = await this.$API.mdshift.list.get();
			this.shiftOptions = resp2.data;

			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;

					const lineCode = this.lineOptions.find(m => m.id == this.formData.lineId).lineCode;
					const areaName = this.areaOptions.find(m => m.code == this.formData.area).name;
					const shiftCode = this.shiftOptions.find(m => m.id == this.formData.shiftId).shiftCode;
					const shiftName = this.shiftOptions.find(m => m.id == this.formData.shiftId).shiftName;
					const inputData = {...this.formData, lineCode, areaName, shiftCode, shiftName};

					let resp = null;
					if (this.formData.id === 0) {
						resp = await this.$API.prod_task.add.post(inputData);
					} else {
						resp = await this.$API.prod_task.update.put(inputData);
					}
					this.isSaveing = false;
					if (resp.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("保存成功");
					} else {
						this.$alert(resp.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.formData = {
				id: 0,
				lineId: undefined,
				shiftId: undefined,
				area: undefined,
				tailProcCode: undefined,
				qty: 0,
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
